


<template>
	<!-- <h1 class="mybg" @click="bg='green'">我是homeview</h1>
	<hr />
	<HomeChild></HomeChild> -->
	
	<!-- <input type="radio" value="HomeChild" v-model="ra"/>
	<input type="radio" value="FormButton" v-model="ra"/>
	{{ra}}
	<br />
	<HomeChild v-if="ra=='HomeChild'"></HomeChild>
	<FormButton v-else></FormButton> -->
	
	<input type="radio" :value="HomeChild" v-model="ra"/>
	<input type="radio" :value="FormButton" v-model="ra"/>

	<br />
	<keep-alive>
		<component :is="ra"></component>
	</keep-alive>
	
	
</template>

<script setup>
	import { ref } from 'vue';
	import HomeChild from '@/components/HomeChild.vue';
	import FormButton from '@/components/forms/FormButton.vue';
	let bg=ref("red");
	let ra=ref(HomeChild)
</script>
<style scoped>
	
	.mybg{
		background: v-bind(bg);
	}
	/* h1{
		background: red;
	} */
	
	/* :deep(.two){
		background: pink;
	} */
</style>


<!-- 
<template>
	<h1 @click="add">{{num}}</h1>
	
	<input type="text" v-model="inp" @input="change"/>
	
	<p>
		{{inp}}
	</p>
	
	<p>
		反转：{{revInp}}
	</p>
	
	<input type="text" v-model="inp" @keyup.enter="addData"/>
	<ul>
		<li v-for="x in arr">{{x}}</li>
	</ul>
	
	<h1 @click="fn1">{{man.user}}</h1>
	<h1 @click="fn2">{{arr}}</h1>
	
	
	 <input type="text" v-model="inp"/>
	 <p>
	 	{{inp}}
	 </p>
	 
	 <p>
	 	反转：{{revInp}}
	 </p>
	 
	 <input type="text" v-model="num" @keyup.enter="fn3"/>
	 <ul>
		 <li v-for="x in arr">{{x}}</li>
	 </ul>
	 <hr />
	 <ul>
	 	<li v-for="x in myArr">{{x}}</li>
	 </ul>
	 
	<input type="text" placeholder="name" v-model="inp.name"/>
	<input type="text" placeholder="tool" v-model="inp.foo.tool"/>
	<h1>inp:{{inp}}</h1>
</template -->>

<!--
<script setup>
	import { computed, onMounted, reactive, ref, watch } from 'vue';
	
	// onMounted(()=>{
	// 	console.log("挂载后1")
	// })
	// onMounted(()=>{
	// 	console.log("挂载后2")
	// })
	// onMounted(()=>{
	// 	console.log("挂载后3")
	// })
	// let inp=reactive ({
	// 	name:"zhang",
	// 	foo:{
	// 		tool:"洗衣机"
	// 	}
	// });
	// watch(inp,()=>{
	// 	console.log("改变了。。。")
	// })
	// watch(()=>{
	// 	return inp
	// },()=>{
	// 	console.log("改变了。。。")
	// },{
	// 	deep:true
	// })
	// watch(()=>{
	// 	return inp.name
	// },()=>{
	// 	console.log("改变了。。。")
	// })
	
	// watch(()=>{
	// 	return inp.foo
	// },()=>{
	// 	console.log("改变了。。。")
	// },{
	// 	deep:true
	// })
	// let num=ref(10);
	// let doubleNum=ref(0);
	// watch(num,()=>{
	// 	doubleNum.value=num.value*2
	// },{
	// 	immediate:true
	// })
	
	// watch(()=>{
	// 	return num.value
	// },()=>{
	// 	doubleNum.value=num.value*2
	// })
	
	
	// let inp=ref("hello")
	// let revInp=computed(()=>{
	// 	return Array.from(inp.value).reverse().join("")
	// })
	// let num=ref("")
	// let arr=ref([])
	// let myArr=computed(()=>{
	// 	return arr.value.filter(v=>v>100)
	// })
	// function fn3(){
	// 	arr.value.push(num.value)
	// }
	
	
	
	// let man=reactive({user:"zhang"})
	// let index=0;
	// let arr=ref([10,20,30]);
	// function fn1(){
	// 	// index++
	// 	// man.user="老王"+index
	// 	// console.log(man)
	// 	let newMan={
	// 		user:"里斯"
	// 	}
	// 	Object.assign(man,newMan)
	// }
	
	// function fn2(){
	// 	//arr.value[0]=1888
	// 	let arr2=[100,200,300]
	// 	arr.value=arr2
	// }
	
	
	
	// let num=ref(100);
	// function add(){
	// 	num.value++
	// }
	// let inp=ref("hello")
	// let revInp=ref("");
	// function change(){
	// 	revInp.value=Array.from(inp.value).reverse().join("")
	// }
	// change()
	
	// let arr=ref([])
	// function addData(){
	// 	arr.value.push(inp.value)
	// 	inp.value=""
	// }
</script>
-->